<template>
	<view class="add-wrap">
		<view class="title">建档信息</view>
		<view class="form-wrap">
			<view class="patient-wrap">
				<text class="patient">就诊人</text>
				<view class="patient-info">
					<text>{{ store.patient.current?.patientName }}</text>
					<text>{{ store.patient.current?.gender === 1 ? '男' : '女' }}</text>
					<text>{{ store.patient.current?.ageYear > 0 ? store.patient.current?.ageYear + '岁' : '' }}{{ store.patient.current?.ageMonth == 0 && store.patient.current?.ageYear == 0 ? '未满月' : store.patient.current?.ageYear < 18 && store.patient.current?.ageMonth != 0 ? store.patient.current?.ageMonth + '月' : '' }}</text>
				</view>
			</view>
			<com-form v-if="!loading" ref="myForm">
				<com-form-item
					v-model="form.height"
					label="当前身高"
					labelWidth="180rpx"
					required
					unit="cm"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.weight"
					label="当前体重"
					labelWidth="180rpx"
					required
					unit="kg"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.father_height"
					label="父亲身高"
					labelWidth="180rpx"
					required
					unit="cm"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.father_weight"
					label="父亲体重"
					labelWidth="180rpx"
					required
					unit="kg"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.mother_height"
					label="母亲身高"
					labelWidth="180rpx"
					required
					unit="cm"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.mother_weight"
					label="母亲体重"
					labelWidth="180rpx"
					required
					unit="kg"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.birth_height"
					label="出生身高"
					labelWidth="180rpx"
					unit="cm"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<com-form-item
					v-model="form.birth_weight"
					label="出生体重"
					labelWidth="180rpx"
					unit="kg"
					placeholder="请输入"
					inputType="number"
					:precision="1"
				/>
				<view class="gy-form-item-box">
					<view class="gy-form-item-label">
						<text>家族矮小史</text>
					</view>
					<view class="gy-form-item-select">
						<view
							v-if="!form.family_short_history || form.family_short_history.length === 0"
							class="gy-form-item-select-show input-placeholder"
							@click.stop="showFamilyHeightHistory"
						>
							请选择
						</view>
						<view
							v-else
							class="gy-form-item-select-show"
							@click.stop="showFamilyHeightHistory">
							{{ form.family_short_history }}
						</view>
						<view class="gy-form-item-select-arrow gy_icon_arrowRight"></view>
					</view>
				</view>
				<com-form-item
					v-model="form.fileUrls"
					label="病例或报告图片"
					subLabel="（请上传一份病历，最多5图片）"
					labelWidth="600rpx"
					inputType="images"
				>
					<template #extend>
						<com-upload-images :sizeLimit="10" v-model="form.fileUrls" :page="page" :maxlength="5" />
					</template>
				</com-form-item>
			</com-form>
		</view>
		<view class="fixedBtn" @tap="save">
			<text class="name">保存</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { addArchive } from '../../request/apis/archive'
import { useArchiveStore } from '@/store/family-short-history'
import { useStore } from '@/store';
import { onLoad } from '@dcloudio/uni-app';
const archiveStore = useArchiveStore();
const store = useStore();

	const myForm = ref(null)
	const loading = ref(false)
	const page = ref(null)
	const form = ref({
		height: ''
	})

	const labelMap = {
		'height': '身高',
		'weight': '体重',
		'father_height': '父亲身高',
		'father_weight': '父亲体重',
		'mother_height': '母亲身高',
		'mother_weight': '母亲体重',
		'birth_height': '出生身高',
		'birth_weight': '出生体重',
		'family_short_history': '家族矮小史'
	}

	const showFamilyHeightHistory = () => {
		uni.navigateTo({
			url: '/pages/archive/family-short-history-checkbox'
		})
	}
	
	const save = () => {
		myForm.value.validate(() => {
			const heightList = ['height', 'father_height', 'mother_height', 'birth_height']
			const weightList = ['weight', 'father_weight', 'mother_weight', 'birth_weight']
			// 如果身高数据大于250小于20,体重数据大于200小于2,不可保存并给出提示
			if (heightList.some(item => form.value[item] > 250 || form.value[item] < 20)) {
				uni.showToast({
					title: '身高范围20-250cm，请重新输入',
					icon: 'none'
				})
				return
			}
			if (weightList.some(item => form.value[item] > 200 || form.value[item] < 2)) {
				uni.showToast({
					title: '体重范围2-200kg，请重新输入',
					icon: 'none'
				})
				return
			}
			const list = Object.keys(form.value).filter(item => item !== 'fileUrls').map(item => {
				return {
					code: item,
					value: form.value[item],
					name: labelMap[item],
					type: 'basic'
				}
			})
			const params = {
				patientId: store.patient.current.id,
				basicList: list,
				fileUrls: form.value.fileUrls
			}
			uni.showLoading({
				title: '保存中...',
				mask: true
			})
			addArchive(params).then(res => {
				uni.hideLoading()
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				})
				archiveStore.updateSelected([]);
				uni.navigateBack()
			}).catch(err => {
				uni.hideLoading()
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
				console.error(err);
			})
		})
	}

	watch(() => archiveStore.selected, (newVal) => {
		form.value.family_short_history = newVal.join(',')
	}, { immediate: true })

	onLoad(() => {
		archiveStore.updateSelected([]);
	})
</script>

<style scoped lang="scss">
.add-wrap {
  min-height: 100vh;
  background-color: #F3F7F8;
	padding-bottom: calc(132rpx + env(safe-area-inset-bottom));
	padding-bottom: calc(132rpx + env(safe-area-inset-bottom));
	.title {
		color: #222222;
		font-size: 32rpx;
		font-weight: bold;
		padding: 32rpx;
	}
	.form-wrap {
		margin: 0 32rpx 48rpx;
		background: #fff;
		border-radius: 16rpx;
		color: #222;
		font-size: 30rpx;
		padding: 40rpx 32rpx 32rpx;
		.patient-wrap {
			display: flex;
			align-content: center;
			justify-content: space-between;
			padding-bottom: 32rpx;
			.patient {
				font-size: 30rpx;
				color: #222;
				font-weight: bold;
			}
			.patient-info {
				display: flex;
				align-items: center;
				gap: 8rpx;
			}
		}
		.gy-form-item-box {
	    min-height: 100rpx;
			@include flex-between-center;
			border-top: 1rpx solid var(--gy-card-line-color);
			.gy-form-item-label{
				color: var(--pt-text-color-title);
				font-weight: 600;
				width: 200rpx;
				.sub-label{
					font-size: var(--gy-font-size-small);
					color: var(--pt-text-color-subtitle);
					margin-right: 5rpx;
					font-weight: normal;
				}
	    }
			.gy-form-item-select {
				width: calc(100% - 200rpx);;
				@include flex-between-center;
				gap: 8rpx;
				.gy-form-item-select-show {
					width: calc(100% - 30rpx);
					padding: 20rpx 0;
					text-align: right;
					// font-size: var(--gy-font-size-small);
					color: #222222;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.input-placeholder {
					color: var(--pt-text-color-placeholder);
				}
				.gy-form-item-select-arrow {
					width: 30rpx;
					@include flex-end-center;
					margin-top: 5rpx;
					font-size: var(--gy-font-size-small);
					color: var(--gy-text-color-placeholder);
					font-weight: bold;
				}
			}
		}
	}
	.fixedBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 24rpx 0;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		color: #fff;
		text-align: center;
		background: #fff;
		z-index: 1;
		// border-top: 1rpx solid #e5e6eb;
	
		.name {
			display: inline-block;
			width: calc(100% - 60rpx);
			padding: 22rpx 0;
			margin: 0 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			background: #00d1b6;
			border-radius: 50rpx;
		}
	}
}
</style>
